<template>
	<view class="content">
		<!-- 头部搜索 -->
		<view class="header">
			<view class="map" @click="toMappage">{{cityName}}</view>
			<view class="search" @click="toSearch">
				<icon :type="iconType" size="16" color="#CC9756"/>
				<input type="text" placeholder="请输入要搜索的商品"/>
			</view>
		</view>
		<!-- swiper -->
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper-container">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item class="swiperitem">
						<image :src="item.image_url" class="slideimage"></image>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- channel -->
		<view class="channel">
			<view class="channel-item" @click="categoryList(item.id)" v-for="(item,index) in channel" :key="index">
				<image :src="item.icon_url" mode=""></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<!-- 背景分割线 -->
		<view class="border"></view>
		<!-- brand -->
		<view class="brand">
			<view class="head" @click="toBrandList">
				品牌制造商直供
			</view>
			<view class="content">
				<view v-for="(item,index) in brandList" :key="index" @click="brandDetail(item.id)">
					<view class="title">
						<text>{{item.name}}</text>
						<text>{{item.floor_price}}元</text>
					</view>
					<image :src="item.new_pic_url" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 新品 -->
		<view class="newgoods">
			<view class="newgoods-top">
				<view class="top">
					<view>新品首发</view>
					<view>查看全部</view>
				</view>
			</view>
			<view class="list">
				<ul>
					<scroll-view class="scroll-view" scroll-x="true" >
						<li v-for="(item,index) in newGoods" :key="index">
							<image :src="item.list_pic_url"></image>
							<view>{{item.name}}</view>
							<view>{{item.goods_brief}}</view>
							<view>￥{{item.retail_price}}</view>
						</li>
					</scroll-view>
				</ul>
			</view>
		</view>
		<!-- hotgoods -->
		<view class="newgoods">
			<view class="hotgoods-top">
				<view class="top">
					<view>好物精选</view>
					<view>查看全部</view>
				</view>
			</view>
			<view class="list">
				<ul>
					<scroll-view class="scroll-view" scroll-x="true" >
						<li v-for="(item,index) in hotGoods" :key="index">
							<image :src="item.list_pic_url"></image>
							<view>{{item.name}}</view>
							<view>{{item.goods_brief}}</view>
							<view>￥{{item.retail_price}}</view>
						</li>
					</scroll-view>
				</ul>
			</view>
		</view>
		<!-- 专题精选 -->
		<view class="topicList">
			<view class="topicList-top">
				专题精选
				<text class="icon"></text>
			</view>
			<view class="list">
				<ul>
					<scroll-view class="scroll-view" scroll-x="true" >
						<li v-for="(item,index) in topicList" :key="index" @click="topicdetail(item.id)">
							<image :src="item.item_pic_url" mode=""></image>
							<view class="btom">
								<view>
									<view>{{item.title}}</view>
									<view>{{item.subtitle}}</view>
								</view>
								<view>{{item.price_info}}元起</view>
							</view>	
						</li>
					</scroll-view>
				</ul>
			</view>
		</view>
		<!-- newcategory -->
		<view class="newcategory">
			<view class="list" v-for="(item,index) in newCategoryList" :key="index">
				<view class="head">
					{{item.name}}好物
				</view>
				<view class="sublist">
					<view v-for="(subitem,subindex) in item.goodsList" :key="subindex">
						<image :src="subitem.list_pic_url" mode=""></image>
						<view>{{subitem.name}}</view>
						<view>{{subitem.retail_price}}</view>
					</view>
					<view class="last">
						<view>{{item.name}}好物</view>
						<view class="icon"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import amapFile from '../../utils/amap-wx.130.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				iconType:"search",
				banner:[],
				channel:[],
				brandList:[],
				newGoods:[],
				hotGoods:[],
				topicList:[],
				newCategoryList:[]
			}
		},
		onLoad() {
			this.getHomeDate()
			this.getCityName()
		},
		computed:{
			...mapState(['cityName'])
		},
		methods: {
			//点击地图跳转页面
			toMappage(){
				let that = this
				//判断用户权限
				uni.getSetting({
					success: res =>{
						if(!res.authSetting['scope.userLocation']){
							//获取用户权限
							uni.openSetting({
								success: res =>{
									that.getCityName()
								}
							})
						}else{
							uni.navigateTo({
								url:'/pages/map/map'
							});
							that.getCityName()
						}
					},
					fail: err =>{
						console.log(err)
					},
					complete:() => {}
				})
			},
			//获取地图信息
			getCityName(){
				let that = this
				var myAmapFun = new amapFile.AMapWX({key:'c72cc261b9301c90270019d99321ad1e'});
				myAmapFun.getRegeo({
					success:function(data){
						const cityName = data[0].desc
						this.$store.commit('changeCityName',cityName)
						console.log(data)					
					},
					fail:function(err){
						//回调失败
						// that.update({cityName:"广州"})
						console.log(err)
					}
				})
			},
			//点击channel跳转到详情列表
			categoryList(id){
				uni.navigateTo({
					url:'/pages/categorylist/categorylist?id=' + id
				})
			}, 
			//点击品牌跳转到品牌页
			brandDetail(id){
				uni.navigateTo({
					url:'/pages/branddetail/main?id=' + id
				})
			},
			//点击跳转品牌列表
			toBrandList(){
				uni.navigateTo({
					url:'/pages/brandlist/brandlist'
				})
			},
			//点击跳转topic详情页
			topicdetail(id){
				uni.navigateTo({
					url:'/pages/topicdetail/topicdetail?id=' + id
				})
			},
			//点击跳转到搜索页面
			toSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			},
		 // ---------------------------网络请求--------------------------------------------
		 //获取首页数据
		 async getHomeDate(){
			 const res = await this.$request({
				 url:"/index/index"
			 })
			 console.log(res)
			 this.banner = res.data.banner
			 this.channel = res.data.channel
			 this.brandList = res.data.brandList
			 this.newGoods = res.data.newGoods
			 this.hotGoods = res.data.hotGoods
			 this.topicList = res.data.topicList
			 this.newCategoryList = res.data.newCategoryList
		 }
		}
	}
</script>

<style lang="scss">
// 搜索框
.header{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 15rpx 20rpx;
	box-sizing: border-box;
	.map{
		flex: 2;
		text-align: center;
		font-size: 30rpx;
	}
	.search{
		flex: 8;
		display: flex;
		align-items: center;
		background-color: #ededed;
		box-sizing: border-box;
		border-radius: 10rpx;
		icon{
			padding: 20rpx;
		}
		input{
			color: $globar;
			font-size: 30rpx;
		}
	}
}
// 轮播图
.swiper{
		width: 100%;
		height: 417rpx;
		margin-top: 8rpx;
		&-container{
			width: 100%;
			height: 100%;
			.swiperitem{
				width: 100%;
				height: 100%;
				.slideimage{
					width: 100%;
				}
			}
		}
	}
// channel
.channel{
	display: flex;
	padding: 20rpx 0;
	background-color: #fff;
	.channel-item{
		flex: 1;
		text-align: center;
		font-size: 30rpx;
		image{
			height: 58rpx;
			width: 58rpx;
			display: inline-block;
		}
	}
}
// 分割线
.border{
	width: 100%;
	height: 20rpx;
	background-color: $border;
}
// brand
.brand{
	width: 100%;
	margin-top: 20rpx;
	background-color: #ffffff;
	.head{
		text-align: center;
		padding: 40rpx 0;
	}
	.content{
		width: 730rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		view{
			width: 360rpx;
			height: 235rpx;
			margin-bottom: 10rpx;
			position: relative;
			.title{
				position: absolute;
				top: 0;
				left: 0;
				padding: 10rpx;
				z-index: 100;
				text:nth-child(2){
					display: block;
					font-size: 24rpx;
				}
			}
		}
		image{
			width: 100%;
			height: 100%;
		}
	}
}
// newgoods
.newgoods{
	width: 100%;
	&-top{
		margin-top: 20rpx;
		height: 260rpx;
		width: 100%;
		background: url('../../static/images/bgnew.png') no-repeat;
		background-size: 100% 100%;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		.top{
			view{
				color: #8c9bae;
				font-size: 32rpx;
			}
			view:nth-child(2){
				width: 180rpx;
				height: 50rpx;
				line-height: 50rpx;
				margin: 27rpx auto 0 auto;
				font-size: 22rpx;
				background-color: #d8e4f0;
			}
		}
	}
	.list{
		margin-top: 20rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
		ul{
			.scroll-view{
				width: 100%;
				white-space: nowrap;
				li{
					width: 280rpx;
					height: 416rpx;
					margin:5rpx 0 5rpx 25rpx;
					display: inline-block;
					image{
						width: 280rpx;
						height: 280rpx;
					}
					view{
						width: 90%;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-top: 8rpx;
						text-indent: lem;
					}
					view:nth-child(2){
						font-size: 30rpx;
						font-weight: bold;
					}
					view:nth-child(3){
						font-size: 24rpx;
						color: #8a8a8a;
					}
					view:nth-child(4){
						font-size: 24rpx;
						color: #9c3232;
					}
				}
			}
		}
	}
}
// hosgoods
.hotgoods-top{
	margin-top: 20rpx;
	height: 260rpx;
	width: 100%;
	background-size: 100% 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	background: url('../../static/images/bgtopic.png') no-repeat;
	.top{
		view{
			color: #8c9bae;
			font-size: 32rpx;
		}
		view:nth-child(2){
			width: 180rpx;
			height: 50rpx;
			line-height: 50rpx;
			margin: 27rpx auto 0 auto;
			font-size: 22rpx;
			background-color: #d8e4f0;
		}
	}
}
// topicList
.topicList{
	margin-top: 20rpx;
	background-color: #fff;
	&-top{
		text-align: center;
		padding: 36rpx;
		vertical-align: middle;
		.icon{
			display: inline-block;
			width: 32rpx;
			height: 32rpx;
			margin-left: 15rpx;
			background: url('../../static/images/right.png') no-repeat;
			vertical-align: middle;
			background-size: 100% 100%;
		}
	}
	.list{
		.scroll-view{
			white-space: nowrap;
			li{
				display: inline-block;
				width: 575rpx;
				margin-left: 25rpx;
				image{
					display: block;
					width: 575rpx;
					height: 325rpx;
					border-radius: 10rpx;
				}
				.btom{
					display: flex;
					justify-content: space-between;
					margin-top: 42rpx;
					width: 100%;
					view:nth-child(1){
						width: 90%;
						view{
							margin-top: 8rpx;
						}
						view:nth-child(1){
							font-size: 30rpx;
							font-weight: bold;
						}
						view:nth-child(2){
							width: 90%;
							font-size: 24rpx;
						  color: #8a8a8a;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
					view:nth-child(2){
						margin-top: 8rpx;
						color: #9c3232;
						font-size: 24rpx;
					}
				}
			}
			li:last-child{
				margin-right: 25rpx;
			}
		}
	}
}
// newcategory
.newcategory {
    margin-top: 20rpx;
    padding: 0 10rpx 25rpx 10rpx;
		background-color: $border;
    .head {
      padding: 25rpx 0;
      text-align: center;
    }
    .sublist {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      width: 730rpx;
      margin: 0 auto;
      view {
        width: 360rpx;
        background: #fff;
        margin-bottom: 10rpx;
        padding-bottom: 10rpx;

        image {
          display: block;
          width: 302rpx;
          height: 302rpx;
          margin: 0 auto;
        }

        view {
          margin-bottom: 5rpx;
          text-indent: 1em;
        }

        view:nth-child(2) {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 98%;
        }

        view:nth-child(3) {
          color: #9c3232;
        }
      }

      .last {
				display: flex;
				flex-direction: column;
        text-align: center;
				justify-content: center;
				align-items: center;
        view {
          height: 33rpx;
          width: 100%;
          line-height: 33rpx;
          color: #333;
          font-size: 33rpx;
          text-align: center;
        }

        .icon {
          display: inline-block;
          width: 70rpx;
          height: 70rpx;
          background: url('../../static/images/rightbig.png') no-repeat;
          background-size: 100% 100%;
          margin-top: 60rpx;
        }
      }

      view:nth-child(2n) {
        margin-left: 10rpx;
      }
    }
  }
</style>
